<!DOCTYPE html>
<html lang="en">

<!-- Mirrored from condorthemes.com/cleanzone/form-multiselect.html by HTTrack Website Copier/3.x [XR&CO'2013], Mon, 31 Mar 2014 14:36:15 GMT -->
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="">
	<meta name="author" content="">
	<link rel="shortcut icon" href="images/favicon.png">

	<title>Clean Zone</title>
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,400italic,700,800' rel='stylesheet' type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=Raleway:300,200,100' rel='stylesheet' type='text/css'>

	<!-- Bootstrap core CSS -->
	<link href="js/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="js/jquery.gritter/css/jquery.gritter.css" />

	<link rel="stylesheet" href="fonts/font-awesome-4/css/font-awesome.min.css">

	<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!--[if lt IE 9]>
	  <script src="../../assets/js/html5shiv.js"></script>
	  <script src="../../assets/js/respond.min.js"></script>
	<![endif]-->
	<link rel="stylesheet" type="text/css" href="js/jquery.nanoscroller/nanoscroller.css" />
	<link rel="stylesheet" type="text/css" href="js/jquery.easypiechart/jquery.easy-pie-chart.css" />
	<link rel="stylesheet" type="text/css" href="js/bootstrap.switch/bootstrap-switch.css" />
	<link rel="stylesheet" type="text/css" href="js/bootstrap.datetimepicker/css/bootstrap-datetimepicker.min.css" />
	<link rel="stylesheet" type="text/css" href="js/jquery.select2/select2.css" />
	<link rel="stylesheet" type="text/css" href="js/bootstrap.slider/css/slider.css" />
  <link rel="stylesheet" type="text/css" href="js/bootstrap.multiselect/css/bootstrap-multiselect.css"/>
  <link rel="stylesheet" type="text/css" href="js/jquery.multiselect/css/multi-select.css" />
	<link href="css/style.css" rel="stylesheet" />	

</head>

<body>

  <!-- Fixed navbar -->
  <div id="head-nav" class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="fa fa-gear"></span>
        </button>
        <a class="navbar-brand" href="#"><span>Clean Zone</span></a>
      </div>
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#about">About</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Contact <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
      <li class="dropdown-submenu"><a href="#">Sub menu</a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          </ul>
      </li>              
      </ul>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Large menu <b class="caret"></b></a>
      <ul class="dropdown-menu col-menu-2">
        <li class="col-sm-6 no-padding">
          <ul>
          <li class="dropdown-header"><i class="fa fa-group"></i>Users</li>
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="dropdown-header"><i class="fa fa-gear"></i>Config</li>
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li> 
          </ul>
        </li>
        <li  class="col-sm-6 no-padding">
          <ul>
          <li class="dropdown-header"><i class="fa fa-legal"></i>Sales</li>
          <li><a href="#">New sale</a></li>
          <li><a href="#">Register a product</a></li>
          <li><a href="#">Register a client</a></li> 
          <li><a href="#">Month sales</a></li>
          <li><a href="#">Delivered orders</a></li>
          </ul>
        </li>
      </ul>
          </li>
        </ul>
    <ul class="nav navbar-nav navbar-right user-nav">
      <li class="dropdown profile_menu">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><img alt="Avatar" src="images/avatar2.jpg" />Jeff Hanneman <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">My Account</a></li>
          <li><a href="#">Profile</a></li>
          <li><a href="#">Messages</a></li>
          <li class="divider"></li>
          <li><a href="#">Sign Out</a></li>
        </ul>
      </li>
    </ul>			
    <ul class="nav navbar-nav navbar-right not-nav">
      <li class="button dropdown">
        <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown"><i class=" fa fa-comments"></i></a>
        <ul class="dropdown-menu messages">
          <li>
            <div class="nano nscroller">
              <div class="content">
                <ul>
                  <li>
                    <a href="#">
                      <img src="images/avatar2.jpg" alt="avatar" /><span class="date pull-right">13 Sept.</span> <span class="name">Daniel</span> I'm following you, and I want your money! 
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="images/avatar_50.jpg" alt="avatar" /><span class="date pull-right">20 Oct.</span><span class="name">Adam</span> is now following you 
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="images/avatar4_50.jpg" alt="avatar" /><span class="date pull-right">2 Nov.</span><span class="name">Michael</span> is now following you 
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="images/avatar3_50.jpg" alt="avatar" /><span class="date pull-right">2 Nov.</span><span class="name">Lucy</span> is now following you 
                    </a>
                  </li>
                </ul>
              </div>
            </div>
            <ul class="foot"><li><a href="#">View all messages </a></li></ul>           
          </li>
        </ul>
      </li>
      <li class="button dropdown">
        <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-globe"></i><span class="bubble">2</span></a>
        <ul class="dropdown-menu">
          <li>
            <div class="nano nscroller">
              <div class="content">
                <ul>
                  <li><a href="#"><i class="fa fa-cloud-upload info"></i><b>Daniel</b> is now following you <span class="date">2 minutes ago.</span></a></li>
                  <li><a href="#"><i class="fa fa-male success"></i> <b>Michael</b> is now following you <span class="date">15 minutes ago.</span></a></li>
                  <li><a href="#"><i class="fa fa-bug warning"></i> <b>Mia</b> commented on post <span class="date">30 minutes ago.</span></a></li>
                  <li><a href="#"><i class="fa fa-credit-card danger"></i> <b>Andrew</b> killed someone <span class="date">1 hour ago.</span></a></li>
                </ul>
              </div>
            </div>
            <ul class="foot"><li><a href="#">View all activity </a></li></ul>           
          </li>
        </ul>
      </li>
      <li class="button"><a href="javascript:;" class="speech-button"><i class="fa fa-microphone"></i></a></li>				
    </ul>

      </div><!--/.nav-collapse -->
    </div>
  </div>
	
<div id="cl-wrapper">
		<div class="cl-sidebar">
			<div class="cl-toggle"><i class="fa fa-bars"></i></div>
			<div class="cl-navblock">
        <div class="menu-space">
          <div class="content">
            <div class="side-user">
              <div class="avatar"><img src="images/avatar1_50.jpg" alt="Avatar" /></div>
              <div class="info">
                <a href="#">Jeff Hanneman</a>
                <img src="images/state_online.png" alt="Status" /> <span>Online</span>
              </div>
            </div>
            <ul class="cl-vnavigation">
              <li><a href="#"><i class="fa fa-home"></i><span>Dashboard</span></a>
                <ul class="sub-menu">
                  <li><a href="index-2.html">Version 1</a></li>
                  <li><a href="dashboard2.html"><span class="label label-primary pull-right">New</span> Version 2</a></li>
                </ul>
              </li>
              <li><a href="#"><i class="fa fa-smile-o"></i><span>UI Elements</span></a>
                <ul class="sub-menu">
                  <li><a href="ui-elements.html">General</a></li>
                  <li><a href="ui-buttons.html">Buttons</a></li>
                  <li><a href="ui-modals.html"><span class="label label-primary pull-right">New</span> Modals</a></li>
                  <li><a href="ui-notifications.html"><span class="label label-primary pull-right">New</span> Notifications</a></li>
                  <li><a href="ui-icons.html">Icons</a></li>
                  <li><a href="ui-grid.html">Grid</a></li>
                  <li><a href="ui-tabs-accordions.html">Tabs & Acordions</a></li>
                  <li><a href="ui-nestable-lists.html">Nestable Lists</a></li>
                  <li><a href="ui-treeview.html">Tree View</a></li>
                </ul>
              </li>
              <li><a href="#"><i class="fa fa-list-alt"></i><span>Forms</span></a>
                <ul class="sub-menu">
                  <li><a href="form-elements.html">Components</a></li>
                  <li><a href="form-validation.html">Validation</a></li>
                  <li><a href="form-wizard.html">Wizard</a></li>
                  <li><a href="form-masks.html">Input Masks</a></li>
                  <li class="active"><a href="form-multiselect.html"><span class="label label-primary pull-right">New</span>Multi Select</a></li>
                  <li><a href="form-wysiwyg.html"><span class="label label-primary pull-right">New</span>WYSIWYG Editor</a></li>
                  <li><a href="form-upload.html"><span class="label label-primary pull-right">New</span>Multi Upload</a></li>
                </ul>
              </li>
              <li><a href="#"><i class="fa fa-table"></i><span>Tables</span></a>
                <ul class="sub-menu">
                  <li><a href="tables-general.html">General</a></li>
                  <li><a href="tables-datatables.html"><span class="label label-primary pull-right">New</span>Data Tables</a></li>
                </ul>
              </li>              
              <li><a href="#"><i class="fa fa-map-marker nav-icon"></i><span>Maps</span></a>
                <ul class="sub-menu">
                  <li><a href="maps.html">Google Maps</a></li>
                  <li><a href="vector-maps.html"><span class="label label-primary pull-right">New</span>Vector Maps</a></li>
                </ul>
              </li>             
              <li><a href="#"><i class="fa fa-envelope nav-icon"></i><span>Email</span></a>
                <ul class="sub-menu">
                  <li><a href="email-inbox.html">Inbox</a></li>
                  <li><a href="email-read.html">Email Detail</a></li>
                  <li><a href="email-compose.html"><span class="label label-primary pull-right">New</span>Email Compose</a></li>
                </ul>
              </li>
              <li><a href="typography.html"><i class="fa fa-text-height"></i><span>Typography</span></a></li>
              <li><a href="charts.html"><i class="fa fa-bar-chart-o"></i><span>Charts</span></a></li>
              <li><a href="#"><i class="fa fa-file"></i><span>Pages</span></a>
                <ul class="sub-menu">
                  <li><a href="pages-blank.html">Blank Page</a></li>
                  <li><a href="pages-blank-header.html">Blank Page Header</a></li>
                  <li><a href="pages-blank-aside.html">Blank Page Aside</a></li>
                  <li><a href="pages-login.html">Login</a></li>
                  <li><a href="pages-404.html">404 Page</a></li>
                  <li><a href="pages-500.html">500 Page</a></li>
                  <li><a href="pages-sign-up.html"><span class="label label-primary pull-right">New</span>Sign Up</a></li>
                  <li><a href="pages-forgot-password.html"><span class="label label-primary pull-right">New</span>Forgot Password</a></li>
                  <li><a href="pages-profile.html"><span class="label label-primary pull-right">New</span>Profile</a></li>
                  <li><a href="pages-search.html"><span class="label label-primary pull-right">New</span>Search</a></li>
                  <li><a href="pages-calendar.html"><span class="label label-primary pull-right">New</span>Calendar</a></li>
                  <li><a href="pages-code-editor.html"><span class="label label-primary pull-right">New</span>Code Editor</a></li>
                  <li><a href="pages-gallery.html">Gallery</a></li>
                  <li><a href="pages-timeline.html">Timeline</a></li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
        <div class="text-right collapse-button" style="padding:7px 9px;">
          <input type="text" class="form-control search" placeholder="Search..." />
          <button id="sidebar-collapse" class="btn btn-default" style=""><i style="color:#fff;" class="fa fa-angle-left"></i></button>
        </div>
			</div>
		</div>
    
	<div class="container-fluid" id="pcont">
		<div class="page-head">
			<h2>Multi Select</h2>
			<ol class="breadcrumb">
			  <li><a href="#">Home</a></li>
			  <li><a href="#">Forms</a></li>
			  <li class="active">Multiselect</li>
			</ol>
		</div>		
    <div class="cl-mcont">

    
    	<div class="row">
				<div class="col-sm-12">
					<div class="block-flat">
						<div class="header">							
							<h3>Basic</h3>
						</div>
						<div class="content">
              <table class="no-border">
                <tbody class="no-border-x no-border-y">
                <tr>
                  <td>
                    <select id="example1">
                      <option value="css" selected>CSS</option>
                      <option value="html">HTML</option>
                      <option value="php">PHP</option>
                      <option value="javascript">Javascript</option>
                      <option value="jquery">jQuery</option>
                      <option value="ajax">AJAX</option>
                    </select>
                  </td>
                  <td>
                    Normal select. The plugin will do single selection using radio buttons rather than multiple selection using checkboxes.
                  </td>
                </tr>
                  <tr>
                      <td>
                          <select id="example2" multiple="multiple">
                              <option value="css" selected>CSS</option>
                              <option value="html" selected>HTML</option>
                              <option value="php" selected>PHP</option>
                              <option value="javascript">Javascript</option>
                              <option value="jquery">jQuery</option>
                              <option value="ajax">AJAX</option>
                          </select>
                      </td>
                      <td>
                          Select with preselected options: <code>&lt;option value=&quot;css&quot; selected&gt;CSS&lt;/option&gt;</code>
                      </td>
                  </tr>
                  <tr>
                      <td>
                          <select id="example27" multiple="multiple">
                              <option value="css">CSS</option>
                              <option value="html">HTML</option>
                              <option value="php">PHP</option>
                              <option value="javascript">Javascript</option>
                              <option value="jquery">jQuery</option>
                              <option value="ajax">AJAX</option>
                          </select>
                      </td>
                      <td>
                          Multiselect with a 'Select all' option
                      </td>
                  </tr>
                               <tr>
                  <td>
                    <select id="example28" multiple="multiple"></select>
                  </td>
                  <td>
                    Multiselect with a 'Select all' option and filtering enabled using the <code>enableFiltering</code> option.
                  </td>
                </tr>
                        <tr>
                  <td>
                    <select id="example41" multiple="multiple">
                                    <option value="css" selected>CSS</option>
                      <option value="html" selected>HTML</option>
                      <option value="php" selected>PHP</option>
                      <option value="javascript" selected>Javascript</option>
                      <option value="jquery" selected>jQuery</option>
                      <option value="ajax" selected>AJAX</option>
                                </select>
                  </td>
                  <td>
                                The 'Select all' option automatically repsonds to the selection of the user. In particular, it responds to the initial state of the select.
                  </td>
                </tr>
                <tr>
                  <td>
                    <select id="example4" multiple="multiple">
                      <option value="css">CSS</option>
                      <option value="html">HTML</option>
                      <option value="php">PHP</option>
                      <option value="javascript">Javascript</option>
                      <option value="jquery">jQuery</option>
                      <option value="ajax">AJAX</option>
                    </select>
                  </td>
                  <td>
                    Small button using <code>buttonClass: &apos;btn btn-default btn-sm&apos;</code>.
                  </td>
                </tr>
                <tr>
                  <td>
                    <div class="input-group btn-group">
                      <span class="input-group-addon"><i class="fa fa-archive"></i></span>
                      <select id="example6" multiple="multiple">
                        <option value="css">CSS</option>
                        <option value="html">HTML</option>
                        <option value="php">PHP</option>
                        <option value="javascript">Javascript</option>
                        <option value="jquery">jQuery</option>
                        <option value="ajax">AJAX</option>
                      </select>
                    </div>
                  </td>
                  <td>
                    Multiple select within a group with add-ons and default container for the plugin: <code>buttonContainer: &apos;&lt;div class="btn-group" /&gt;&apos;</code>.
                  </td>
                </tr>
                <tr>
                  <td>
                    <select id="example9" multiple="multiple">
                      <option value="css">CSS</option>
                      <option value="html">HTML</option>
                      <option value="php">PHP</option>
                      <option value="javascript">Javascript</option>
                      <option value="jquery">jQuery</option>
                      <option value="ajax">AJAX</option>
                    </select>
                  </td>
                  <td>
                    Using the <code>onChange</code> option you can add an event handler to the change event. The event handler gets the selected option as first parameter and a variable saying whether the option is checked or not as second one.
                  </td>
                </tr>
                <tr>
                  <td>
                    <select id="example11" multiple="multiple">
                      
                    </select>
                  </td>
                  <td>
                    For long option lists the <code>maxHeight</code> option can be set.
                  </td>
                </tr>
                <tr>
                  <td>
                    <select id="example13" multiple="multiple">
                      <option value="enabled1">Enabled 1</option>
                      <option value="enabled2">Enabled 2</option>
                      <option value="disabled2" disabled="disabled">Disabled 1</option>
                    </select>
                  </td>
                  <td>
                    The plugin supports disabled options, too: <code>disabled=&quot;disabled&quot;</code>
                  </td>
                </tr>
                <tr>
                  <td>
                    <select id="example14" multiple="multiple">
                      <option value="css">CSS</option>
                      <option value="html">HTML</option>
                      <option value="php">PHP</option>
                      <option value="javascript">Javascript</option>
                      <option value="jquery">jQuery</option>
                      <option value="ajax">AJAX</option>
                    </select>
                  </td>
                  <td>
                    Use the <code>buttonWidth</code> option to adjust the width of the button.
                  </td>
                </tr>
                <tr>
                  <td>
                    <select id="example16" multiple="multiple">
                      <option value="css">CSS</option>
                      <option value="html">HTML</option>
                      <option value="php">PHP</option>
                      <option value="javascript">Javascript</option>
                      <option value="jquery">jQuery</option>
                      <option value="ajax">AJAX</option>
                    </select>
                  </td>
                  <td>
                    Using the <code>onChange</code> option to prevent user from deselecting selected options.
                  </td>
                </tr>
                <tr>
                  <td>
                    <select id="example19" multiple="multiple">
                      <optgroup label="Mathematics">
                        <option value="analysis">Analysis</option>
                        <option value="algebra">Linear Algebra</option>
                        <option value="discrete">Discrete Mathematics</option>
                        <option value="numerical">Numerical Analysis</option>
                        <option value="probability">Probability Theory</option>
                      </optgroup>
                      <optgroup label="Computer Science">
                        <option value="programming">Introduction to Programming</option>
                        <option value="automata">Automata Theory</option>
                        <option value="complexity">Complexity Theory</option>
                        <option value="software">Software Engineering</option>
                      </optgroup>
                    </select>
                  </td>
                  <td>
                    Option groups are detected automatically and for each option group an header element is added: <code>&lt;optgroup label=&quot;Mathematics&quot;&gt;...&lt;/optgroup&gt;</code>
                  </td>
                </tr>
                <tr>
                  <td>
                    <select id="example23" multiple="multiple">
                      <option value="lab">Lab Course</option>
                      <option value="proseminar">Proseminar</option>
                      <optgroup label="Mathematics">
                        <option value="analysis">Analysis</option>
                        <option value="algebra">Linear Algebra</option>
                        <option value="discrete">Discrete Mathematics</option>
                        <option value="numerical">Numerical Analysis</option>
                        <option value="probability">Probability Theory</option>
                      </optgroup>
                      <optgroup label="Computer Science">
                        <option value="programming">Introduction to Programming</option>
                        <option value="automata">Automata Theory</option>
                        <option value="complexity">Complexity Theory</option>
                        <option value="software">Software Engineering</option>
                      </optgroup>
                    </select>
                  </td>
                  <td>
                    Option groups and options without any group are supported simultaneously.
                  </td>
                </tr>
                <tr>
                  <td>
                    <select id="example20" multiple="multiple">
                      <option value="css">CSS</option>
                      <option value="html">HTML</option>
                      <option value="php">PHP</option>
                      <option value="javascript">Javascript</option>
                      <option value="jquery">jQuery</option>
                      <option value="ajax">AJAX</option>
                    </select>
                  </td>
                  <td>
                    Using the <code>selectedClass</code> option to turn off the active class for selected options.
                  </td>
                </tr>
                <tr>
                  <td>
                    <select id="example24" multiple="multiple">
                      <option value="analysis" label="Ana">Analysis</option>
                      <option value="algebra" label="LA">Linear Algebra</option>
                      <option value="discrete" label="Discrete">Discrete Mathematics</option>
                      <option value="numerical" label="NumA">Numerical Analysis</option>
                      <option value="probability" label="Proba">Probability Theory</option>
                    </select>
                  </td>
                  <td>
                    Specifiy an alternaitve label for the options: <code>&lt;option label=&quot;label&quot;&gt;&lt;/option&gt;</code>
                  </td>
                </tr>
                        <tr>
                            <td>
                    <div class="pull-left">
                                  <select id="example25" multiple="multiple">
                                          <option value="analysis" label="Ana">Analysis</option>
                                            <option value="algebra" label="LA">Linear Algebra</option>
                                            <option value="discrete" label="Discrete">Discrete Mathematics</option>
                                            <option value="numerical" label="NumA">Numerical Analysis</option>
                                            <option value="probability" label="Proba">Probability Theory</option>
                                  </select>
                    </div>
                            </td>
                            <td>
                                Make the menu drop right instead of dropping left with <code>dropRight</code>.
                            </td>
                        </tr>
                <tr>
                  <td>
                    <select id="example26" multiple="multiple" data-role="multiselect">
                      <option value="css">CSS</option>
                      <option value="html">HTML</option>
                      <option value="php">PHP</option>
                      <option value="javascript">Javascript</option>
                      <option value="jquery">jQuery</option>
                      <option value="ajax">AJAX</option>
                    </select>
                  </td>
                  <td>
                    Using the <code>data-role="multiselect"</code> attribute for automatic wireup.
                  </td>
                </tr>
                <tr>
                  <td>
                    <select id="example31" multiple="multiple" data-role="multiselect" disabled>
                      <option value="css">CSS</option>
                      <option value="html">HTML</option>
                      <option value="php">PHP</option>
                      <option value="javascript">Javascript</option>
                      <option value="jquery">jQuery</option>
                      <option value="ajax">AJAX</option>
                    </select>
                  </td>
                  <td>
                    The multiselect will adopt the state of the select: <code>&lt;select disabled&gt;&lt;/select&gt;</code>.
                  </td>
                </tr>
                        <tr>
                  <td>
                    <select id="example32" multiple="multiple" tabindex="1">
                      <option value="css">CSS</option>
                      <option value="html">HTML</option>
                      <option value="php">PHP</option>
                      <option value="javascript">Javascript</option>
                      <option value="jquery">jQuery</option>
                      <option value="ajax">AJAX</option>
                    </select>
                  </td>
                  <td>
                    The button will keep the <code>tabindex</code> of the select.
                  </td>
                </tr>
                        <tr>
                  <td>
                    <select id="example39" multiple="multiple">
                      <option value="lab">Lab Course</option>
                      <option value="proseminar">Proseminar</option>
                      <optgroup label="Mathematics">
                        <option value="analysis">Analysis</option>
                        <option value="algebra">Linear Algebra</option>
                        <option value="discrete">Discrete Mathematics</option>
                        <option value="numerical">Numerical Analysis</option>
                        <option value="probability">Probability Theory</option>
                      </optgroup>
                      <optgroup label="Computer Science">
                        <option value="programming">Introduction to Programming</option>
                        <option value="automata">Automata Theory</option>
                        <option value="complexity">Complexity Theory</option>
                        <option value="software">Software Engineering</option>
                      </optgroup>
                    </select>
                  </td>
                  <td>
                    Using <code>optgroups</code>s with filtering and the select all option.
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
					</div>
        </div>
      </div>
			<div class="row">
				<div class="col-sm-12">
					<div class="block-flat">
						<div class="header">							
							<h3>Boxed Multiselect</h3>
						</div>
						<div class="content">
              <table class="dashed">
                <tr>
                  <td>
                    <select multiple="multiple" id="my-select" name="my-select[]">
                      <option value='elem_1'>elem 1</option>
                      <option value='elem_2'>elem 2</option>
                      <option value='elem_3'>elem 3</option>
                      <option value='elem_4'>elem 4</option>
                      <option value='elem_5'>elem 5</option>
                      <option value='elem_6'>elem 6</option>
                      <option value='elem_7'>elem 7</option>
                    </select>
                  </td>
                  <td>Activates your content as a multiselect.</td>
                </tr>
                <tr>
                  <td>
                    <select id='pre-selected-options' multiple='multiple'>
                      <option value='elem_1' selected>elem 1</option>
                      <option value='elem_2'>elem 2</option>
                      <option value='elem_3' selected>elem 3</option>
                      <option value='elem_4'>elem 4</option>
                      <option value='elem_5' selected>elem 5</option>
                      <option value='elem_6'>elem 6</option>
                      <option value='elem_7'>elem 7</option>
                    </select>
                  </td>
                  <td>Select with preselected options: <code>&lt;option value=&quot;elem_3&quot; selected&gt;elem 3&lt;/option&gt;</code></td>
                </tr>
                <tr>
                  <td>
                    <select id='callbacks' multiple='multiple'>
                      <option value='elem_1'>elem 1</option>
                      <option value='elem_2'>elem 2</option>
                      <option value='elem_3'>elem 3</option>
                      <option value='elem_4'>elem 4</option>
                      <option value='elem_5'>elem 5</option>
                      <option value='elem_6'>elem 6</option>
                      <option value='elem_7'>elem 7</option>
                    </select>
                  </td>
                  <td>The event handler gets the selected option as first parameter and a variable saying whether the option is checked or not as second one. </td>
                </tr>
                <tr>
                  <td>
                    <select id='optgroup' multiple='multiple'>
                      <optgroup label='Jedi'>
                        <option value='1'>Yoda</option>
                        <option value='2' selected>Obiwan</option>
                      </optgroup>
                      <optgroup label='Sith'>
                        <option value='3'>Palpatine</option>
                        <option value='4' disabled>Darth Vader</option>
                      </optgroup>
                    </select>
                  </td>
                  <td>Option groups are detected automatically and for each option group an header element is added</td>
                </tr>
                <tr>
                  <td>
                    <select id='disabled-attribute' disabled='disabled' multiple='multiple'>
                      <option value='elem_1'>elem 1</option>
                      <option value='elem_2'>elem 2</option>
                      <option value='elem_3'>elem 3</option>
                      <option value='elem_4'>elem 4</option>
                      <option value='elem_5'>elem 5</option>
                      <option value='elem_6'>elem 6</option>
                      <option value='elem_7'>elem 7</option>
                    </select>
                  </td>
                  <td>You can also deactivate option one by one by adding disabled attribute to each option you want to disable <br><code>&lt;option value='fuu' disabled='disabled'&gt;bar&lt;/option&gt;</code></td>
                </tr>
                <tr>
                  <td>
                    <select id='custom-headers' multiple='multiple'>
                      <option value='elem_1'>elem 1</option>
                      <option value='elem_2'>elem 2</option>
                      <option value='elem_3'>elem 3</option>
                      <option value='elem_4'>elem 4</option>
                      <option value='elem_5'>elem 5</option>
                      <option value='elem_6'>elem 6</option>
                      <option value='elem_7'>elem 7</option>
                    </select>
                  </td>
                  <td>This option add a header to the multiselect box.</td>
                </tr>
                </tr>
                <tr>
                  <td>
                    <select id='searchable' multiple='multiple'>
                      <option value='elem_1'>elem 1</option>
                      <option value='elem_2'>elem 2</option>
                      <option value='elem_3' selected>elem 3</option>
                      <option value='elem_4'>elem 4</option>
                      <option value='elem_5'>elem 5</option>
                      <option value='elem_6'>elem 6</option>
                      <option value='elem_7' selected>elem 7</option>
                    </select>
                  </td>
                  <td>Adds a search bar to filter options</td>
                </tr>
              </table>
            </div>
					</div>
        </div>
      </div>
    
    
    </div>
	</div> 
	
</div>

	<script src="js/jquery.js"></script>
	<script type="text/javascript" src="js/jquery.nanoscroller/jquery.nanoscroller.js"></script>
	<script type="text/javascript" src="js/jquery.sparkline/jquery.sparkline.min.js"></script>
	<script type="text/javascript" src="js/jquery.easypiechart/jquery.easy-pie-chart.js"></script>
  <script src="js/jquery.ui/jquery-ui.js" type="text/javascript"></script>
	<script type="text/javascript" src="js/jquery.nestable/jquery.nestable.js"></script>
	<script type="text/javascript" src="js/bootstrap.switch/bootstrap-switch.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
	<script src="js/jquery.select2/select2.min.js" type="text/javascript"></script>
	<script src="js/bootstrap.slider/js/bootstrap-slider.js" type="text/javascript"></script>
	<script type="text/javascript" src="js/jquery.gritter/js/jquery.gritter.js"></script>
  <script type="text/javascript" src="js/bootstrap.multiselect/js/bootstrap-multiselect.js"></script>
  <script type="text/javascript" src="js/jquery.multiselect/js/jquery.multi-select.js"></script>
  <script type="text/javascript" src="js/jquery.quicksearch/jquery.quicksearch.js"></script>
	<script type="text/javascript" src="js/behaviour/general.js"></script>

    <script type="text/javascript">
      $(document).ready(function(){
        //initialize the javascript
        App.init();
    
        $('#example1').multiselect();
    
        $('#example2').multiselect();
    
        $('#example3').multiselect({
            buttonClass: 'btn btn-link'
        });
    
        $('#example4').multiselect({
            buttonClass: 'btn btn-default btn-sm'
        });
    
        $('#example6').multiselect();
    
        $('#example9').multiselect({
            onChange:function(element, checked){
                alert('Change event invoked!');
                console.log(element);
            }
        });
    
        for (var i = 1; i <= 100; i++) {
            $('#example11').append('<option value="' + i + '">Options ' + i + '</option>');
        }
        $('#example11').multiselect({
            maxHeight: 200
        })
    
        $('#example13').multiselect();
    
        $('#example14').multiselect({
            buttonWidth: '500px',
            buttonText: function(options) {
                if (options.length === 0) {
                    return 'None selected <b class="caret"></b>';
                }
                else {
                    var selected = '';
                    options.each(function() {
                        selected += $(this).text() + ', ';
                    });
                    return selected.substr(0, selected.length -2) + ' <b class="caret"></b>';
                }
            }
        });
    
        $('#example16').multiselect({
            onChange: function(option, checked) {
                      if (checked === false) {
                          $('#example16').multiselect('select', option.val());
                      }
            }
        });
    
        $('#example19').multiselect();

        $('#example20').multiselect({
            selectedClass: null
        });
    
        $('#example23').multiselect();
    
        $('#example24').multiselect();

        $('#example25').multiselect({
          dropRight: true,
          buttonWidth: '300px'
        });

        $('#example27').multiselect({
          includeSelectAllOption: true
        });

    // Add options for example 28.
    for (var i = 1; i <= 100; i++) {
      $('#example28').append('<option value="' + i + '">' + i + '</option>');
    }

        $('#example28').multiselect({
          includeSelectAllOption: true,
          enableFiltering: true,
          maxHeight: 150
        });
              
              $('#example32').multiselect();
              
              $('#example39').multiselect({
                  includeSelectAllOption: true,
          enableCaseInsensitiveFiltering: true
              });
              
              $('#example41').multiselect({
          includeSelectAllOption: true
        });
        //multi-select boxed
        $('#my-select').multiSelect()
        $('#pre-selected-options').multiSelect();
        $('#callbacks').multiSelect({
          afterSelect: function(values){
            alert("Select value: "+values);
          },
          afterDeselect: function(values){
            alert("Deselect value: "+values);
          }
        });
        $('#optgroup').multiSelect({ selectableOptgroup: true });
        $('#disabled-attribute').multiSelect();
        $('#custom-headers').multiSelect({
          selectableHeader: "<div class='custom-header'>Selectable items</div>",
          selectionHeader: "<div class='custom-header'>Selection items</div>",
        });
        $('#searchable').multiSelect({
          selectableHeader: "<input type='text' class='form-control search-input' autocomplete='off' placeholder='Search'>",
          selectionHeader: "<input type='text' class='form-control search-input' autocomplete='off' placeholder='Search'>",
          afterInit: function(ms){
            var that = this,
                $selectableSearch = that.$selectableUl.prev(),
                $selectionSearch = that.$selectionUl.prev(),
                selectableSearchString = '#'+that.$container.attr('id')+' .ms-elem-selectable:not(.ms-selected)',
                selectionSearchString = '#'+that.$container.attr('id')+' .ms-elem-selection.ms-selected';

            that.qs1 = $selectableSearch.quicksearch(selectableSearchString)
            .on('keydown', function(e){
              if (e.which === 40){
                that.$selectableUl.focus();
                return false;
              }
            });

            that.qs2 = $selectionSearch.quicksearch(selectionSearchString)
            .on('keydown', function(e){
              if (e.which == 40){
                that.$selectionUl.focus();
                return false;
              }
            });
          },
          afterSelect: function(){
            this.qs1.cache();
            this.qs2.cache();
          },
          afterDeselect: function(){
            this.qs1.cache();
            this.qs2.cache();
          }
        });
        
        
      });
    </script>

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
  <script src="js/behaviour/voice-commands.js"></script>
  <script src="js/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.flot/jquery.flot.js"></script>
<script type="text/javascript" src="js/jquery.flot/jquery.flot.pie.js"></script>
<script type="text/javascript" src="js/jquery.flot/jquery.flot.resize.js"></script>
<script type="text/javascript" src="js/jquery.flot/jquery.flot.labels.js"></script>
</body>

<!-- Mirrored from condorthemes.com/cleanzone/form-multiselect.html by HTTrack Website Copier/3.x [XR&CO'2013], Mon, 31 Mar 2014 14:36:25 GMT -->
</html>
